<template>
    <div class="tab-bar-item" :class="{ active: isActive }" @click="handleClick">
      <i :class="iconStyle"></i>
      <slot></slot>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  import useParent from '../hooks/useParent'
  
  const { parent, index } = useParent('TabBar')
  
  const props = defineProps({
    icon: {
      type: String,
      required: true,
      default: 'user',
    },
  })
  
  const isActive = computed(() => {
    return parent.props.modelValue === index.value
  })
  
  const iconStyle = computed(() => {
    return `iconfont icon-${props.icon}`
  })
  
  const handleClick = () => {
    parent.setActive(index.value)
  }
  </script>
  
  <style scoped>
  @import 'http://at.alicdn.com/t/c/font_3660333_clz5n3z0jtw.css';
  
  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    font-size: 12px;
    color: white;
  }
  .tab-bar-item i {
    font-size: 18px;
  }
  .tab-bar-item.active {
    color: red;
  }
  </style>